<template>
	<div class="jcxx">
		<el-card class="box-card">

			<div slot="header" class="clearfix">
				<el-row :gutter="15">
					<el-col :span="24">
						<div style="float: left;font-weight: bold;font-size: 18px;">优品仓库：{{ warehouse.warehouseCode}}
						</div>
						<div style="float: right;">
							<el-button plain size="small">编辑</el-button>
							<el-button plain size="small" @click="handlCopy">复制</el-button>
							<el-button plain size="small">删除</el-button>
							<el-button plain size="small">停用</el-button>
							<el-button plain size="small">锁定</el-button>
						</div>
					</el-col>
				</el-row>

				<el-row style="font-size: 14px;">
					<el-col :span="2">
						<ul>
							<li>提交人</li>
							<li>仓库编号</li>
							<li>库管部门</li>
						</ul>
					</el-col>
					<el-col :span="5">
						<ul>
							<li style="color: #bfbfbf;line-height: 14px;margin-top: 7px;">{{warehouse.crateBy}}</li>
							<li style="color: #bfbfbf;">{{warehouse.warehouseCode}}</li>
							<li style="color: #bfbfbf;">{{warehouse.dept}}</li>
						</ul>
					</el-col>
					<el-col :span="2">
						<ul>
							<li>操作时间</li>
							<li>仓库名称</li>
							<li>仓库主管</li>
						</ul>
					</el-col>
					<el-col :span="5">
						<ul>
							<li style="color: #bfbfbf;line-height: 14px;margin-top: 7px;">
								{{parseTime(warehouse.crateTime)}}
							</li>
							<li style="color: #bfbfbf;">{{warehouse.warehouseName}}</li>
							<li style="color: #bfbfbf;">{{warehouse.manager}}</li>
						</ul>
					</el-col>
					<el-col :span="2">
						<ul>
							<li>更新时间</li>
							<li>仓库容量/m³</li>
							<li>联系电话</li>
						</ul>
					</el-col>
					<el-col :span="7">
						<ul>
							<li style="color: #bfbfbf;line-height: 14px;margin-top: 7px;"
								v-if="warehouse.updateTime != null">
								{{parseTime(warehouse.updateTime)}}
							</li>
							<li style="color: #bfbfbf;line-height: 14px;margin-top: 7px;" v-else>暂无</li>
							<li style="color: #bfbfbf;">{{warehouse.warehouseVessel}}</li>
							<li style="color: #bfbfbf;">{{user[warehouse.manager]}}</li>
						</ul>
					</el-col>
					<el-col :span="1" style="text-align: right;">
						<div style="color: #bfbfbf;">状态</div>
						<div style="margin: 10px 0px;">
							<dict-tag v-if="warehouse.warehouseLock == 1" :options="dict.type.py_warehouse_lock" :value="warehouse.warehouseLock" />
							<dict-tag v-else :options="dict.type.py_warehouse_status" :value="warehouse.warehouseStatus" />							
						</div>
						<div style="color: #bfbfbf;">库位数量</div>
						<div style="margin: 10px 0px;">
							<span style="font-weight: bold;font-size: 18px;">{{locationCount}}</span>
						</div>
					</el-col>
				</el-row>
				<el-row style="font-size: 14px;margin: 0px 0px 25px 0px;">
					<el-col :span="24">
						仓库地址 <span style="color:#bfbfbf;margin-left: 58px;">{{warehouse.warehouseAddress}}</span>
					</el-col>
				</el-row>
				<el-row style="font-size: 14px;margin: 0px 0px 25px 0px;">
					<el-col :span="24">
						备注 <span style="color:#bfbfbf;margin-left: 58px;">{{warehouse.warehouseRemarks}}</span>
					</el-col>
				</el-row>
			</div>

			<div class="text item" style="font-size: 14px;">
				创建人 <span style="margin: 0px 20px;color: #bfbfbf;">{{warehouse.crateBy}}</span>
				创建时间 <span style="margin: 0px 40px 0px 20px;color: #bfbfbf;">{{parseTime(warehouse.crateTime)}}</span>
				更新人 <span style="margin: 0px 20px;color: #bfbfbf;"
					v-if="warehouse.updateBy != null">{{warehouse.updateBy}}</span>
				<span style="margin-left: 100px;" v-else></span>
				更新时间<span style="margin: 0px 20px;color: #bfbfbf;">{{parseTime(warehouse.updateTime)}}</span>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>库位信息</span>
			</div>
			<div class="text item">
				<div class="app-container">
					<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
						label-width="68px">
						<el-form-item label="库位编号" prop="locationCode">
							<el-input v-model="queryParams.locationCode" placeholder="请输入库位编号" clearable
								@keyup.enter.native="handleQuery" />
						</el-form-item>
						<el-form-item label="库位名称" prop="locationName">
							<el-input v-model="queryParams.locationName" placeholder="请输入库位名称" clearable
								@keyup.enter.native="handleQuery" />
						</el-form-item>
						<el-form-item label="库位主管" prop="manager">
							<el-input v-model="queryParams.manager" placeholder="请输入库位主管" clearable
								@keyup.enter.native="handleQuery" />
						</el-form-item>
						<el-form-item label="库位状态" prop="locationStatus">
							<el-select v-model="queryParams.locationStatus" placeholder="请选择库位状态" clearable>
								<el-option v-for="dict in dict.type.py_position_status" :key="dict.value"
									:label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
							</el-button>
							<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-form>

					<el-row :gutter="10" class="mb8">
						<el-col :span="1.5">
							<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
								v-hasPermi="['system:location:export']">导出</el-button>
						</el-col>
						<el-col :span="1.5">
							<el-button plain size="mini" :disabled="single"
								@click="handleEnable">启用</el-button>
						</el-col>
						<el-col :span="1.5">
							<el-button  plain size="mini" :disabled="single"
								@click="handleDeactivate">停用</el-button>
						</el-col>
						<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
					</el-row>

					<el-table v-loading="loading" :data="locationList" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" align="center" />
						<el-table-column label="库位编号" align="center" prop="locationCode" />
						<el-table-column label="库位名称" align="center" prop="locationName" />
						<el-table-column label="库位容量" align="center" prop="locationVessel" />
						<el-table-column label="库位主管" align="center" prop="manager" />
						<el-table-column align="center" prop="locationStatus" key="locationStatus" label="库位状态"
							width="120">
							<template #default="{ row }">
								<dict-tag :options="dict.type.py_position_status" :value="row.locationStatus" />
							</template>
						</el-table-column>
						<el-table-column label="排序" align="center" prop="locationSort" />
						<el-table-column label="备注" align="center" prop="locationRemarks" />
					</el-table>

					<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize" @pagination="getList" />
				</div>
			</div>
		</el-card>


	</div>

</template>
<script>
	import {
		listLocation,
		getWarehouse,
		getUser,
		findBsWhLocationByCount,
		getWhInventoryByWarehouseCode,
		deactivateThatLocation,
	} from '../../../../api/warehouse/warehouse.js'

	import {
		Message
	} from 'element-ui'

	export default {
		name: "Location",
		dicts: ['py_position_status','py_warehouse_status','py_warehouse_lock'],
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// location表格数据
				locationList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					locationCode: null,
					locationName: null,
					manager: null,
					locationStatus: null,
					warehouseCode: null,
				},
				//仓库信息
				warehouse: {},
				//库位数量
				locationCount: 0,
				//用户
				user: {},
				codes: [],
			};
		},
		computed: {

		},
		watch: {},
		created() {
			//获取仓库信息
			this.getThisWarehouse();
			//获取用户
			this.getManagerOptions();
		},
		mounted() {},
		methods: {
			// 获取仓库信息
			getThisWarehouse() {
				//获取仓库编号
				this.warehouse.warehouseId = this.$route.query.warehouseId;
				getWarehouse(this.warehouse.warehouseId).then(response => {
					this.warehouse = response.data;
					this.queryParams.warehouseCode = response.data.warehouseCode;
					//获取库位列表
					this.getList();
					/** 获取库位数量 */
					this.getLocationCount();
				});
			},
			/** 查询location列表 */
			getList() {
				this.loading = true;
				listLocation(this.queryParams).then(response => {
					this.locationList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/* 获取用户 */
			getManagerOptions() {
				// TODO 发起请求获取数据
				getUser().then((result) => {
					result.forEach(r => {
						this.$set(this.user, r.userName, r.phonenumber);
					})
				})
			},
			/** 获取库位数量 */
			getLocationCount() {
				findBsWhLocationByCount(this.warehouse.warehouseCode).then(response => {
					this.locationCount = response;
				});
			},
			/** 停用按钮操作 */
			handleDeactivate() {
				getWhInventoryByWarehouseCode(this.codes).then(response => {
					if (response > 0)
						Message({
							message: '请先清空库位编号为[' + this.codes + ']下面的商品',
							type: 'error',
							duration: 2000 // 显示时间，单位毫秒
						});
					else
						deactivateThatLocation(this.codes,2).then(response => {
							this.getList();
							this.$modal.msgSuccess("修改成功");
						})
				})
			},
			/** 启用按钮操作 */
			handleEnable() {
				deactivateThatLocation(this.codes,1).then(response => {
					this.getList();
					this.$modal.msgSuccess("修改成功");
				})
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.locationId)
				this.codes = selection.map(item => item.locationCode)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('system/location/export', {
					...this.queryParams
				}, `location_${new Date().getTime()}.xlsx`)
			},
			
			/** 复制按钮操作 */
			handlCopy(){
				const el = document.createElement('textarea');
				el.value = '复制成功';
				document.body.appendChild(el);
				// 拿到textarea中的文本
				el.select();
				// 调用复制命令
				document.execCommand('copy');
				document.body.removeChild(el);
			}
		}

	}
</script>
<style>
	ul {
		padding: 0px;
		margin: 0px;
		list-style-type: none;
	}

	li {
		margin-bottom: 25px;
	}

	.jcxx {
		margin-top: 20px;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 100%;
		margin-top: 20px;
	}

	.total-row {
		background-color: #f9f9f9;
		/* 背景色 */
		font-weight: bold;
		/* 粗体 */
	}
</style>
